import { useEffect, useState } from 'react';
import { Form, Input, InputNumber, Radio, Select } from 'antd';
import { useUrlSearchParams } from 'use-url-search-params';
import an58 from '@mmstudio/an000058';
import RightContainer from '../../../components/rightcontainer';
import Title from './title';
import List from './list';
import api from '../../../atoms/api';
import { IData, Query as Q1, Result as R1 } from '../../api/teachjd/xsxk/content/query.api';
import Pagination from '../../../components/pagination';
import Search from '../../../components/search';



export default function Content({ ints, classs }: {
	ints: Q1
	classs: Pick<ITbclass, 'grade' | 'classname'>[]

}) {
	const [data, setdata] = useState<R1>({
		count: 0,
		data: []
	});
	const [query, setquery] = useState<Q1>(ints);
	// const [, setParams] = useUrlSearchParams({}, { page: Number });
	async function reload(q: Q1) {
		setquery(q);
		// setParams(q);
		const data = await an58<R1, Q1>(api['/api/teachjd/xsxk/content/query'], 'get', q);
		setdata(data);
	}
	useEffect(() => {
		void reload(query);
	}, []);
	return <>
		<Title />
		<div className='s'>
			<RightContainer>
				<div className='s'>
					<Form.Item required label="年级:">
						<Select
							optionFilterProp="children"
							filterOption={(input, option) => {
								return option.children.indexOf(input) >= 0;
							}}
							placeholder='请选择'
						>
							{classs.map((it) => {
								return <Select.Option key={it.grade} value={it.grade} >{it.grade}</Select.Option>;
							})}
						</Select>
					</Form.Item>
					<Form.Item required label="班级:">
						<Select
							optionFilterProp="children"
							filterOption={(input, option) => {
								return option.children.indexOf(input) >= 0;
							}}
							placeholder='请选择'
						>
							{classs.map((it) => {
								return <Select.Option key={it.classname} value={it.classname} >{it.classname}</Select.Option>;
							})}
						</Select>
					</Form.Item>
				</div>
			</RightContainer>
			<RightContainer>
				<Search<IData>
					pagesize={Number(query.pagesize)}
					service={api['/api/teachjd/xsxk/content/query']}
					initq={query.q}
					onChange={(v) => {
						setdata({
							count: v.count,
							data: v.data
						});
						setquery({
							q: v.q,
							page: v.page.toString(),
							pagesize: query.pagesize
						});
					}} />
			</RightContainer>
		</div>
		<List data={data.data} />
		<RightContainer>
			<Pagination
				current={Number(query.page || '1')}
				pageSize={Number(query.pagesize || '10')}
				showTitle
				total={data.count}
				onChange={(p, s) => {
					const q = {
						q: query.q,
						page: p.toString(),
						pagesize: s.toString()
					} as Q1;
					setquery(q);
					reload(q);
				}}
			/>
		</RightContainer>
		<style jsx>{`
		.s{
display:flex;
justify-content: space-between;

}
		`}</style>
	</>;
}
